<template>
  <UseTemplate>
    <template #sou>
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </template>
    <template #nero>
      <div class="kes-max">
        <van-tabs v-model:active="active" shrink sticky>
          <van-tab
            :title="item.catName"
            v-for="(item, index) in fldata"
            :key="index"
            ><List :searchValue="text" :active></List
          ></van-tab>
        </van-tabs>
      </div>
    </template>
  </UseTemplate>
</template>

<script lang="ts" setup>
import { getAppCategory } from '@/services/user'
import List from './components/List.vue'
import { ref, onMounted } from 'vue'
import type { objs } from '@/types/user'
const searchValue = ref('')
const text = ref('')
const active = ref(0)

const onSearch = (val: any) => {
  text.value = val
}
const onClickButton = () => {
  onSearch(searchValue.value)
}

const fldata = ref<objs[]>()
const getfldata = async () => {
  const res = await getAppCategory()
  fldata.value = res.data
  fldata.value.unshift({
    catId: '', //分类主键
    catSn: '', //编号
    catName: '全部' //类别名称
  })
}
onMounted(() => {
  getfldata()
})
</script>

<style lang="scss" scoped>
:deep() .van-nav-bar__content {
  background: #2463fe;
  color: #fff;
}
:deep() .van-nav-bar__title {
  color: #fff;
}
.van-hairline--bottom:after {
  border-bottom-width: 0px;
}
.van-search {
  padding: 0;
  border-radius: 2px;
}
.van-nav-bar {
  background: #2463fe;
}
.kes-max {
  width: 100%;
  height: 100%;
}
</style>
